<template>
	<view class="list pd30">
		<view class="sbox dfx">
			<view class="sort mr20" :class="[idx==index && 'active']" v-for="(sort,idx) in sorts" :key="idx"
				@click="getData(idx)">
				{{sort}}
			</view>
		</view>
		<scroll-view :scroll-top="scrollTop"  scroll-y="true" style="height: 43vh;"
			@scrolltolower="lower">
			<view class="listBox df wrap" v-if="list.length>0">
				<view class="item" v-for="(item,idx) in list" @click="$tools.navTo('live/liveDetail',i)">
					<view class="center">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="df alc" style="background: #f4f5f6;">
						<view class="title text-over2">
							{{item.title}}
						</view>
						<view class="badge">
							{{item.badge}}
						</view>
					</view>
				</view>
			</view>
			<view class="" @click="$tools.navTo('live/live?show=true')" v-else>
				<!-- 内容为空 -->
				<u-empty iconColor="#c4c6c9" textColor="#c4c6c9" text="暂无视频,点击添加" marginTop="50" mode="order"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "videoList",
		// props: {
		// 	livelist: {
		// 		type: Array,
		// 		default: []
		// 	},
		// },
		data() {
			return {
				list: [{
						name: '小周女士',
						header: 'https://salephine.asia/img/index/logo.gif',
						auth: '已经过官方验证',
						title: '高腰遮胯牛仔短裙女夏2023新款蓝色a字显',
						badge: 'OOTD',
						tip: '1030人已买',
						price: '325.99',
						img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/53810478/O1CN01cbw7jj1FOy9YfCy29_!!0-saturn_solar.jpg_250x250.jpg_.webp'
					},
					{
						name: '小吴女士',
						header: 'https://salephine.asia/img/index/logo.gif',
						auth: '已经过官方验证',
						title: '高腰遮胯牛仔短裙女夏2023新款蓝色a字显瘦防走光小个子半身裙子',
						badge: 'OOTD',
						tip: '1030人已买',
						price: '335.99',
						img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/3596248858/O1CN01V2YinW2FJ179lJLas_!!0-item_pic.jpg_250x250.jpg_.webp'
					},
					{
						name: '小吴女士',
						header: 'https://salephine.asia/img/index/logo.gif',
						auth: '已经过官方验证',
						title: '高腰遮胯牛仔短裙女夏2023新款蓝色a字显瘦防走光小个子半身裙子',
						badge: 'OOTD',
						tip: '1030人已买',
						price: '335.99',
						img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/3596248858/O1CN01V2YinW2FJ179lJLas_!!0-item_pic.jpg_250x250.jpg_.webp'
					},
				],
				index: 0,
				sorts: ['全部', '已完成', '合成中', '合成失败'],
				scrollTop: 0,
				triggered: false
			};
		},
		// watch: {
		// 	livelist: {
		// 		handler(val) {
		// 			if (val, length > 0) {
		// 				this.list = []
		// 			}
		// 		},
		// 		immediate: true
		// 	},
		// },
		mounted() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		methods: {
			lower() {
				console.log('bottom');
			},
			getData(idx) {

				let params = {
					...this.formInline
				}
				if (idx != undefined || idx != null) {
					this.index = idx
					params.idx = idx
				}
				this.$api.list(params).then(res => {
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},

		}
	}
</script>

<style lang="less">
	.sbox {
		margin-bottom: 24rpx;

		.sort {
			border-radius: 32rpx;
			color: #8fbaff;
			background: #eef5ff;
			width: 130rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 14px;
		}

		.active {
			background: #146fff;
			color: #fff;
		}
	}

	.list {
		width: 91%;
		margin: 30rpx 0;
		border-radius: 40rpx;
		background-color: #fff;
		box-shadow: 0px 4px 10px rgba(0, 110, 213, 0.06);
		height: 50vh;

		.tline {
			background: #217dfd;
			width: 6rpx;
			height: 40rpx;
			margin-right: 10rpx;
			border-radius: 16rpx;
			margin-top: 4rpx;
		}

		.more {
			padding: 6rpx 14rpx;
			background: #fff;
			border-radius: 50px;

		}

		.listBox {

			.item {
				height: 610rpx;
				width: 306rpx;
				background: #ffffff;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #f3f3f3;

				.center {
					width: 306rpx;
					height: 512rpx;
					background: #f8f8f8;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					margin: 16rpx 0rpx 16rpx 10rpx;
					font-size: 24rpx;
					color: #333;
				}

				.badge {
					padding: 2rpx 4rpx;
					border-radius: 4rpx;
					box-sizing: border-box;
					color: #fff;
					font-size: 18rpx;
					height: 32rpx;
					line-height: 32rpx;
					background-color: #c37b85;
				}

				.icon1 {
					width: 60rpx;
					height: 60rpx;
					border-radius: 8px;
					line-height: 60rpx;
					text-align: center;
					font-family: fantasy;
					margin-right: 20rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.info {
					width: 70vw;
					line-height: 60rpx;
					font-weight: 600;
				}
			}

			.item:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>